/* component */
import { AuthTreeNodeContent, AuthTreeNode } from '@src/modules/account/roleService/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import { isArray, isNotEmpty } from '@src/util/type'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, reactive, Ref, ref, toRefs } from 'vue'

export type AuthTreeNodeProps = {
  showCheckbox: boolean
  deep: number;
  expand: boolean;
  node: Record<string, any>
}

export interface AuthTreeNodeSetupState {
  
}

export enum AuthTreeNodeEventEnum {
  Input = 'input',
  NodeCheck = 'nodeCheck',
  NodeClick = 'nodeClick',
}

export type AuthTreeNodeEmitsOptions = {
  input: () => void;
}

export type AuthTreeNodeInstance = ComponentInstance & AuthTreeNodeSetupState
export type AuthTreeNodeVM = AuthTreeNodeSetupState & AuthTreeNodeProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.AuthTreeNode,
  emits: [
    AuthTreeNodeEventEnum.Input,
    AuthTreeNodeEventEnum.NodeCheck,
    AuthTreeNodeEventEnum.NodeClick,
  ],
  props: {
    deep: {
      type: Number,
      default: 0
    },
    expand: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: () => ({})
    },
    showCheckbox: {
      type: Boolean,
      default: true
    }
  },
  setup(props: AuthTreeNodeProps, { slots, emit }) {
    
    const isExpand = ref(props.expand === true)
    
    const isSelected = computed(() => {
      return false
    })
    
    const treeNodeContentClassNames = computed(() => {
      return [
        'auth-tree-node-content', 
        isSelected.value ? 'auth-tree-node-content__selected' : '',
        `auth-tree-node-deep-${props.deep}`
      ]
    })
    
    const treeNodeContentStyle =computed(() => {
      return {
        paddingLeft: `${(props.deep) * 16}px`
      }
    })
    
    const treeNodeArrowClassNames = computed(() => {
      return [
        'auth-tree-node-arrow', 
        isExpand.value ? 'auth-tree-node-arrow__down' : ''
      ]
    })
    
    const isHaveChild = computed(() => {
      return isArray(props?.node?.children) && isNotEmpty(props.node.children)
    })
    
    const onNodeCheckoutClickChangeHandler = (value: boolean) => {
      emit(AuthTreeNodeEventEnum.NodeCheck, { node: props.node, value })
    }
    
    const onNodeNameCheckoutClickChangeHandler = () => {
      emit(AuthTreeNodeEventEnum.NodeClick, props.node)
    }
    
    function toggle() {
      
      if (isHaveChild.value) {
        isExpand.value = !isExpand.value
      }
      
    }
    
    return {
      treeNodeContentClassNames,
      treeNodeContentStyle,
      treeNodeArrowClassNames,
      isHaveChild,
      isExpand,
      toggle,
      onNodeCheckoutClickChangeHandler,
      onNodeNameCheckoutClickChangeHandler
    }
    
  },
  render() {
    return (
      <div class={ComponentNameEnum.AuthTreeNode}>
        
        <div class={this.treeNodeContentClassNames} style={this.treeNodeContentStyle}>
          
          <span class={this.treeNodeArrowClassNames} onClick={this.toggle}>
            {this.isHaveChild && (
              <i class="iconfont icon-arrow-right"></i>
            )}
          </span>
          
          {this.showCheckbox && (
            <el-checkbox value={this.node?.isChecked} onInput={this.onNodeCheckoutClickChangeHandler} />
          )}
          
          <span class="base-tree-node-name" onClick={this.onNodeNameCheckoutClickChangeHandler}>
            <AuthTreeNodeContent node={this.node} />
          </span>
          
        </div>
        
        {this.isExpand && (
          
          this.node.children.map((node: any) => {
            return (
              <AuthTreeNode 
                key={node.id}
                node={node}
                showCheckbox={this.showCheckbox}
                selected={this.selected}
                deep={this.deep + 1}
                expand={this.expand}
                nodeRender={this.nodeRender}
                onNodeClick={this.onNodeNameCheckoutClickChangeHandler}
                onNodeCheck={this.onNodeCheckoutClickChangeHandler}
              />
            )
          })
          
        )}
        
      </div>
    ) as any
  }
}) as any
